<template>
   
  <div id="supplier">
      <h3>供货商</h3>
      <div class="head">
      <div class="left">
        <router-link to="/Supplier/SupplierAdd"><i class="el-icon-plus"></i>添加</router-link>
      </div>
      <div class="right">
        <el-input v-model="input_name" placeholder="请输入供应商"></el-input>
        <el-input v-model="input_tel" placeholder="请输入负责人"></el-input>
        <el-input v-model="input_tel" placeholder="请输入联系方式"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </div>
    </div>
      <!-- 只要在项目中安装和配置了 vue-router ，就可以使用 router-view 这个组件了 -->
      <!-- 它的作用很单纯：占位符 -->
     
      <router-view></router-view>
      <div class="content">
      <el-table :data="tableData" style="width: 100%; background-color: black;">
          <el-table-column
              prop="logo"
              label="LOGO"
              width="180">
          </el-table-column>
          <el-table-column
              prop="supplier"
              label="供货商"
              width="180">
          </el-table-column>
          <el-table-column
              prop="director"
              label="负责人">
          </el-table-column>
          
          <el-table-column
              prop="tel"
              label="联系方式">
          </el-table-column>
          <el-table-column
              prop="address"
              label="地址">
              
          </el-table-column>
          <el-table-column
              prop="others"
              label="备注">
          </el-table-column>
          <el-table-column width="200px" label="操作">
            <template slot-scope="scope">
              <router-link to="/Supplier/SupplierEdit"><el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button></router-link>
                <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
      </el-table>
      <div class="bottom">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="1000">
        </el-pagination>
      </div>
    </div>    
  </div>

</template>

<script>
 export default {
    data() {
      return {
          
        input_name:'',
        input_tel:'',
        tableData: [{
          id:'1',
          logo: '1',
          supplier: 'xx',
          director: '李四',
          tel: '111111',
          address: '河北省石家庄市',
          others: '无',
          op: '修改'
        }, {
          id:'2',
          logo: '1',
          supplier: 'xx',
          director: '李四',
          tel: '111111',
          address: '河北省石家庄市',
          others: '无',
          op: '修改'
        }, {
          id:'3',
          logo: '1',
          supplier: 'xx',
          director: '李四',
          tel: '111111',
          address: '河北省石家庄市',
          others: '无',
          op: '修改'
        }, {
          id:'4',
          logo: '1',
          supplier: 'xx',
          director: '李四',
          tel: '111111',
          address: '河北省石家庄市',
          others: '无',
          op: '修改'
        }, {
          id:'5',
          logo: '1',
          supplier: 'xx',
          director: '李四',
          tel: '111111',
          address: '河北省石家庄市',
          others: '无',
          op: '修改'
        }, {
          id:'6',
          logo: '1',
          supplier: 'xx',
          director: '李四',
          tel: '111111',
          address: '河北省石家庄市',
          others: '无',
          op: '修改'
        }, {
          id:'7',
          logo: '1',
          supplier: 'xx',
          director: '李四',
          tel: '111111',
          address: '河北省石家庄市',
          others: '无',
          op: '修改'
        }, {
          id:'8',
          logo: '1',
          supplier: 'xx',
          director: '李四',
          tel: '111111',
          address: '河北省石家庄市',
          others: '无',
          op: '修改'
        }]
      }
    },
    methods: {
      search() {
        if(this.input_name === '' || this.input_tel === '') {
          alert("内容不能为空")
          return;
        }
        // console.log(this.input_name + this.input_tel)
        this.$confirm('你确定要执行此操作吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$message({
            type: 'success',
            message: '搜索成功!'
          });
          this.tableData = this.tableData.filter(item => item.name === this.input_name && item.tel === this.input_tel);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消搜索'
          });
        });
      },
     
      // 修改方法
      handleEdit(index, row) {
        this.$router.push("/UserManagement/Manager/ManagerModify")
        console.log(index, row);
      },
       // 删除方法
      handleDelete(id) {
        this.$confirm('你确定要删除此数据吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.tableData = this.tableData.filter(item => item.id != id);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
      
    }
  }
</script>


<style lang="less">
#supplier {
  height: 100%;
  .content {      
    margin-left: 30px;
    margin-right: 30px;
  }
  .head {
    display: flex;
    justify-content: space-between;
    margin: 30px;
    .left {
      width: 90px;
      height: 40px;
      background-color: #0f6bb1;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      a {
        margin: auto;
        color: white;
      }
    }
    .right {
      .el-input {
        width: 160px; 
        margin-right: 30px; 
        border-radius: 50px;
      }
    }
  }
}

</style>